<template>
    <!-- 意见反馈 -->
    <view class="container">
        <uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
            <uni-forms-item label="问题和意见" name="opinion">
                <textarea class="form-opinion" v-model="formData.opinion" placeholder="请填写你的意见反馈,感谢你的支持(必填)"
                    placeholder-class="textarea-placeholder" />
            </uni-forms-item>
            <uni-forms-item label="联系方式" name="contactMsg">
                <input class="form-contactMsg" v-model="formData.contactMsg" placeholder="留下联系方式，更快解决问题"
                    placeholder-class="input-placeholder" />
            </uni-forms-item>
        </uni-forms>
        <button class="submit">提交</button>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
//类型todo
const formData = ref<any>({
    opinion: "",
    contactMsg: ""
})
const rules = {
    // 对name字段进行必填验证
    opinion: {
        rules: [{
            required: true,
            errorMessage: '此为必填项，请填写！',
        },
        {
            minLength: 1,
            maxLength: 100,
            errorMessage: '超过最大字数限制',
        }
        ]
    }
}

</script>
<style>
page {
    background-color: #fff;
}
</style>
<style scoped lang="scss">
.container {
    margin: 20rpx;

    .form {
        font-size: 32rpx;

        &-opinion {
            box-sizing: border-box;
            border: 1rpx solid #ddd;
            border-radius: 10rpx;
            padding: 15rpx;
            font-size: 28rpx; // 设置字体大小和行高一样解决内部出现滚动条问题
            line-height: 28rpx;
            width: 100%;
        }

        &-contactMsg {
            border: 1rpx solid #ddd;
            border-radius: 10rpx;
            font-size: 28rpx;
            padding: 10rpx;
        }
    }

    .submit {
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        margin: 30rpx 20rpx;
        color: #fff;
        border-radius: 80rpx;
        font-size: 30rpx;
        background-color: $color-main;

    }
}
</style>
